<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 页面响应式，具体在demo.css中实现 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 页面响应式 -->
    <title>515音乐论坛-文章页</title>
    <link type="text/css" rel="stylesheet" href="css/style-nav&foot.css" />
    <script src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/js-nav&foot.js"></script>
    <script type="text/javascript" src="js/js.cookie.js"></script>
    <!-- search页面 -->
    <link href="https://fonts.googleapis.com/css?family=Inconsolata|Righteous" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="css/phone-menu-styles.css" />
    <link rel="stylesheet" type="text/css" href="css/demo-search.css" />
    <link rel="stylesheet" type="text/css" href="css/react-head&foot.css" />
    <link rel="stylesheet" type="text/css" href="css/style-search.css" />
    <link rel="stylesheet" type="text/css" href="css/article/article.css" />
    <!-- demo必须在style-search的上面 -->
    <script>
        document.documentElement.className = 'js';
    </script>
    <!-- search页面 -->

</head>

<body class="phone-body">
    <!-- search页面 -->
    <svg class="hidden">
        <defs>
            <symbol id="icon-search" viewBox="0 0 24 24">
                <title>search</title>
                <path
                    d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
            </symbol>
            <symbol id="icon-cross" viewBox="0 0 24 24">
                <title>cross</title>
                <path
                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
            </symbol>
        </defs>
    </svg>

    <!-- <div id="welcome">
        
    </div>     -->

    <!-- 这个是主页，相当于body，请把页面中所有内容写到这里来 -->
    <main class="main-wrap">






        <!--头-->
        <div id="head">
            <header class="codrops-header" id="codrops-header">
                <div class="search-wrap">
                    <button id="btn-search" class="btn btn--search"><svg class="icon icon--search">
                            <use xlink:href="#icon-search"></use>
                        </svg></button>
                </div>
            </header>
            <div id="logo">
                <div id="slogen"><img src="img/LOGO/slogen.png" width="50%"></div>
                <div id="cd"></div>
                <div id="needle"><img src="img/LOGO/zhen.png" width="50%"></div>
                <div id="name"><img src="img/LOGO/name.png" width="50%"></div>
            </div>
            <ul id="nav">
                <div class="one-nav">
                    <li class="current-nav"><a href="http://localhost:8066/Music_forum/login-regist-writeText/home.html" id="current-a" class="nav">HOME<div class="wee grad"></div></a>
                    </li>
                </div>
                <div class="one-nav">
                    <li><a class="nav" href="http://localhost:8066/Music_forum/login-regist-writeText/rankingList.html">排行榜</a></li>
                </div>
                <div class="one-nav">
                    <li><a class="nav" href="http://localhost:8066/Music_forum/login-regist-writeText/discuss.html">乐评</a></li>
                </div>
                <div class="one-nav">
                    <li><a class="nav" href="http://localhost:8066/Music_forum/login-regist-writeText/Shop.html">唱片小店</a></li>
                </div>
            </ul>
            <div id="login">
                <li src="" id="in" class="login"><a href="http://localhost:8066/Music_forum/login-regist-writeText/enter.html">Sign In</a></li>
                <li src="" id="up" class="login"><a href="http://localhost:8066/Music_forum/login-regist-writeText/login.html">Sign Up</a></li>
            </div>
            <div class="loginOn">
                <div id="loginOn-avatar"><img src="img/article/avatar-default.jpg" width="100%" height="100%" id="loginOn-image"></div>
                <div id="loginOn-name">小明_111</div>
            </div>




            <nav class="phone-nav">
                <ul>
                    <li><a href="http://localhost:8066/Music_forum/login-regist-writeText/home.html">HOME</a></li>
                    <li><a href="http://localhost:8066/Music_forum/login-regist-writeText/rankingList.html">排行榜</a></li>
                    <li><a href="http://localhost:8066/Music_forum/login-regist-writeText/discuss.html">乐 评</a></li>
                    <li><a href="http://localhost:8066/Music_forum/login-regist-writeText/Shop.html">唱片店</a></li>
                    <li><a href="http://localhost:8066/Music_forum/login-regist-writeText/enter.html">- 登录</a></li>
                    <li><a href="http://localhost:8066/Music_forum/login-regist-writeText/login.html">- 注册</a></li>
                </ul>
            </nav>
            <div class="nav-toggle">
                <div class="icon"></div>
            </div>
        </div>

        <div class="enter-head"></div>
        <div id="main-content">
            <img src="img/artList/textdefalut.png" id="textimage">
            <div id="article-title" class="grad">515音乐论坛-515</div>
            <div id="author">
                <div class="avatar"><img src="img/article/avatar-default.jpg" width="50px"></div>
                <p id="author-username">小明_1234</p>
                <p id="author-time">发表于</p>
            </div>
            <article id="article-content">欢迎来到515<br><br>音<br>乐论15<br><br>音<br>乐15<br><br>音<br>乐15<br><br>音<br>乐坛</article>
            <!-- 发射爱心 -->
            
            <div id="feedback">
                    <div class="love"></div>
                    <button id="arti-collections">收藏</button>
                    <button id="article-like">喜欢</button>
                    <button id="article-conmmet-title">评论</button>
            </div>
            
            <div id="writecomment">
                    <textarea id="article-writeComment" placeholder="善意的评论是友好交流的开始"></textarea>
                    <button id="commit-comment">发送</button>
            </div>
            

            <div id="allComments">

            </div>
        </div>


        <!--尾-->
        <div id="foot">
            <div class="foot-txt">
                <div id="foot-logo"><img src="img/LOGO/logo-foot.jpg" width="200px"></div>
                <br><br>关于我们 | 联系我们 | 服务条款 | 隐私政策<br /><br>Copyright © 515lab & 515music. All Rights Reserved.<div>
                    circleChen Darius xiaotaoLi zheyuanLi</div>
            </div>
        </div>
    </main>

    <div class="search">
        <button id="btn-search-close" class="btn btn--search-close" aria-label="Close search form"><svg
                class="icon icon--cross">
                <use xlink:href="#icon-cross"></use>
            </svg></button>
        <form class="search__form" action=""  onsubmit="return false">
            <input class="search__input" name="search" type="search" placeholder="Search" autocomplete="off"
                autocorrect="off" autocapitalize="off" spellcheck="false" />
            <span class="search__info">Hey！需要一些推荐吗？</span>
            <div id="recommend">
                <div class="recommends">邓紫棋</div>
                <div class="recommends">国语流行</div>
                <div class="recommends">摇滚</div>
            </div>

        </form>
    </div>
    <!-- search页面 -->



    <script src="js/demo-search.js"></script>
    <script src="js/article/article.js"></script>
</body>

</html>